<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .logList {
            overflow-x: hidden;
            width: 100%;
            padding: 0px;
            background-color: #eaeaea;
        }

        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 20px 0px;
            background: #fff;
        }

        .Modular>div {
            width: 80% !important;
            margin: auto;
        }

        .log {
            width: 80%;
            margin: 20px auto;
        }

        .log_left {
            width: 10%;
            height: 100%;
            position: fixed;
            top: 20px;
            background: #fff;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            padding: 10px 0px;


            /* width: 10%;
            height: 100%;
            position: fixed;
            top: 20px;
            background: #fff;
            box-shadow: 0 4px 11px 0px #bbbbbb;
            padding: 10px 0px;
            z-index: 99; */
        }

        .log_left i {
            font-weight: normal !important;
            /* font-size: 18px; */
        }

        .log_left span {
            margin-left: 10px;
        }

        .log_left ul li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
            font-size: 15px;
            font-weight: bold;
            color: #868686;
            cursor: pointer;
            box-sizing: border-box;
        }

        .log_left ul li:hover {
            color: #1E9FFF;
            background: #b6deff;
        }

        .leftHandle {
            color: #1E9FFF !important;
            background: #b6deff !important;
        }

        .log_right {
            width: 86%;
            float: right;
        }

        .s_btn {
            width: 40%;
            float: right;
            text-align: center;
        }

        .s_btn i {
            font-size: 28px;
            color: #fff;
            position: absolute;
            cursor: pointer;
            background: #1E9FFF;
            text-align: center;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            padding: 4px;
        }

        .s_btn input {
            height: 40px;
            background: #f1f1f1;
            border: none;
            font-size: 16px;
            width: 80%;
            display: inline-block;
        }

        .e_r_tab .layui-table-view {
            margin-top: 60px;
        }

        .log_showtype {
            display: none;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF !important;
        }

        .layui-table-page {
            text-align: right;
        }

        .layui-laypage-prev i:hover,
        .layui-laypage-next i:hover {
            color: #1E9FFF !important;
        }
    </style>
</head>

<body class="logList">

    <div class="log layui-form">
        <div class="log_left">
            <ul>
                <li>
                    <i class="layui-icon">&#xe626;</i>
                    <span>服务访问日志</span>
                </li>
                <li>
                    <i class="layui-icon">&#xe6ed;</i>
                    <span>服务监控日志</span>
                </li>
                <li>
                    <i class="layui-icon">&#xe66f;</i>
                    <span>安全管理日志</span>
                </li>
                <li>
                    <i class="layui-icon">&#xe702;</i>
                    <span>系统在线日志</span>
                </li>
                <li>
                    <i class="layui-icon">&#xe667;</i>
                    <span>系统警报日志</span>
                </li>
            </ul>
        </div>
        <div class="log_right">
            <div class="e_r_tab"
                style="width: 100%;background: #fff;box-sizing: border-box;padding:25px 15px; box-shadow: 3px 6px 11px 0 #d4d4d4;overflow: hidden;">
                <!--手机模式显示左侧树按钮-->
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal log_showtype"> 选择类型</button>
                <!-- 搜索 -->
                <div class="s_btn">
                    <input id="keywords" type="text" name="title" placeholder="请输入" autocomplete="off"
                        class="layui-input search">
                    <i class="layui-icon" onclick="search()">&#xe615;</i>
                </div>
                <!-- 表格 -->
                <table class="layui-hide" id="test"></table>

            </div>
        </div>
    </div>


    <script src="../../JS/jquery-2.0.3.js"></script>
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <script>
        //点击左侧菜单获取数据
        var element, form, table;
        // 全局变量
        var index = 0;
        var UT = ['服务访问', '服务监控', '安全管理', '系统在线', '系统警报'];
        layui.use(['element', 'form', 'table'], function () {
            element = layui.element;
            form = layui.form;
            table = layui.table;

            // 初始化加载服务访问日志
            otherLog()
        });
        
        $('.log_left ul li').eq(0).addClass('leftHandle')
        $('.log_left ul li').click(function () {
            index = $(this).index();
            $(this).addClass('leftHandle').siblings('li').removeClass('leftHandle')
            if (index === 3) {
                system()
            } else {
                otherLog()
            }
        })
        // 系统在线日志
        function system() {
            table.render({
                elem: '#test'
                , url: parent.defaultUrl + '/loginlogs'
                , method: 'post'
                , contentType: 'application/json'
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['prev', 'page', 'next', 'skip', 'limit', 'count',] //自定义分页布局
                    , limit: 15//一页显示多少条
                    , limits: [5, 10, 15]//每页条数的选择项
                    , first: "首页" //不显示首页
                    , last: "尾页" //不显示尾页
                }
                , where: {
                    ispage: true,
                    condition: {
                        param: ''
                    }
                }
                , parseData: function (res) {
                    return {
                        'code': 0, //解析接口状态
                        'msg': '', //解析提示文本
                        'count': res.totle, //解析数据长度
                        'data': res.data //解析数据列表
                    };
                }
                , cols: [[
                    { field: 'id', title: 'ID', sort: true, align: 'center', width: 80 }
                    , { field: 'username', title: '用户昵称', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'system', title: '系统', align: 'center' }
                    , { field: 'browser', title: '浏览器', align: 'center' }
                    , { field: 'ip', title: 'IP', align: 'center', width: 200 }
                    , { field: 'location', title: '地址', align: 'center', width: 300 }
                ]]
            });
        }
        //  其他日志
        function otherLog() {
            // debugger
            table.render({
                elem: '#test'
                , url: parent.defaultUrl + '/log'
                , method: 'post'
                , contentType: 'application/json'
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['prev', 'page', 'next', 'skip', 'limit', 'count',] //自定义分页布局
                    , limit: 15//一页显示多少条
                    , limits: [5, 10, 15]//每页条数的选择项
                    , first: "首页" //不显示首页
                    , last: "尾页" //不显示尾页
                }
                , where: {
                    ispage: true,
                    condition: {
                        type: UT[index]
                    }
                }
                , parseData: function (res) {
                    return {
                        'code': 0, //解析接口状态
                        'msg': '', //解析提示文本
                        'count': res.totle, //解析数据长度
                        'data': res.data //解析数据列表
                    };
                }
                , cols: [[
                    { field: 'id', title: 'ID', sort: true, align: 'center', width: 80 }
                    , { field: 'username', title: '用户昵称', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'operation', title: '操作', align: 'center' }
                    , { field: 'type', title: '类型', align: 'center' }
                    , { field: 'ip', title: 'IP', align: 'center', width: 200 }
                    , { field: 'time', title: '耗时', align: 'center' }
                    , { field: 'location', title: '地址', align: 'center', width: 200 }
                    , { field: 'createTime', title: '创建时间', align: 'center', width: 160 }
                ]]
            });
        }
        // 搜索(重载表格)
        function search() {
            // 获取input的值
            var keywords = $('#keywords').val()

            // 判断索引进行表格重载
            if (index === 3) {
                table.reload('test', {
                    url: parent.defaultUrl +'/loginlogs'
                    , method: 'post'
                    , contentType: 'application/json'
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['prev', 'page', 'next', 'skip', 'limit', 'count',] //自定义分页布局
                        , limit: 15//一页显示多少条
                        , limits: [5, 10, 15]//每页条数的选择项
                        , first: "首页" //不显示首页
                        , last: "尾页" //不显示尾页
                    }
                    , where: {
                        ispage: true,
                        condition: {
                            param: keywords
                        }
                    }
                });
            } else {
                table.reload('test', {
                    url: parent.defaultUrl +'/log'
                    , method: 'post'
                    , contentType: 'application/json'
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['prev', 'page', 'next', 'skip', 'limit', 'count',] //自定义分页布局
                        , limit: 15//一页显示多少条
                        , limits: [5, 10, 15]//每页条数的选择项
                        , first: "首页" //不显示首页
                        , last: "尾页" //不显示尾页
                    }
                    , where: {
                        ispage: true,
                        condition: {
                            param: keywords,
                            type: UT[index]
                        }
                    }
                });
            }
        }
        
        $(function () {
            $('.s_type ul li').click(function () {
                $(this).addClass('s_typeLi');
                $(this).siblings().removeClass('s_typeLi')
            })
            //手机模式显示左侧类型按钮触发事件
            $('.log_showtype').click(function () {
                if ($('.log_left').css('display') !== 'none') {
                    $(this).text('选择类型');
                    $('.log_left').hide().animate({ 'left': '-180px' }, 100)
                    $('.log_right').animate({ 'marginLeft': '0px' }, 100)
                } else {
                    $(this).text('隐藏类型');
                    $('.log_left').show().animate({ 'left': '10px' }, 100)
                    $('.log_right').animate({ 'marginLeft': '190px' }, 100)
                }
            })
        })
    </script>
</body>

</html>